<template>
    <div id="appNav">
        <div class="wrapper">
          <el-menu id="nav"class="el-menu-portal" :default-active="$route.path" mode="horizontal" @select="onMenuSelected" background-color="#313a46" text-color="#fff" active-text-color="#ffd04b">
            
            <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
              <el-menu-item :index="item.path" :key="index+''"  v-show="item.onlyone">{{item.name}}</el-menu-item>
              
              <el-submenu :index="index+''" v-if="!item.onlyone">
                <template slot="title">{{item.name}}</template>
                <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
              </el-submenu>
            </template>

            <div class="nav-right" v-if="!this.$store.state.auth.isLoggedIn">
              <el-button type="text" @click="Register">注册</el-button>
              <el-button type="text" @click="SignIn">登录</el-button>
            </div>
            <div class="nav-right" v-if="this.$store.state.auth.isLoggedIn">
              <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 20px;color: beige">{{this.$store.state.user.RealName}}</i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item >
                      <el-button type="text" @click="logout">注销</el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-menu>
        </div>
    </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  props: ["menuList"],

  mounted: function() {
  },
  methods: {
    onMenuSelected(key, keyPath) {
      this.$router.push({ path:  key }); //取配置地址
    },
    turnTo(key)
    {
      this.$router.push({ path:  key }); //取配置地址
    },
    SignIn:function(){
      this.$router.push({ path:  "/" }); //取配置地址
    },
    Register:function(){
      this.$router.push({ path:  "/" }); //取配置地址
    },
    logout(){
      debugger
      this.$store.commit('CLEAR_ALL_DATA');
      localStorage.clear();
      this.$router.push({ path:  "/" }); //取配置地址
    }
  }
};
</script>

<style>
#appNav {
  height: 44px;
  line-height: 44px;
  background-color: #313a46;
}

#appNav .wrapper {
  margin: 0 auto;
  width: 95%;
}

.nav-right{
  float: right;
}

.el-menu-portal.el-menu--horizontal .el-menu-item {
  height: 44px;
  line-height: 44px;
}

.el-menu-portal.el-menu--horizontal .el-submenu .el-submenu__title {
  height: 44px;
  line-height: 44px;
}

.el-menu-portal.el-menu--horizontal .el-submenu .el-menu-item,
.el-menu-portal.el-menu--horizontal .el-submenu .el-submenu-title {
  height: 40px;
  line-height: 40px;
}

.el-menu-portal.el-menu--horizontal .el-submenu .el-menu-item:hover,
.el-menu-portal.el-menu--horizontal .el-submenu .el-submenu-title:hover {
  /* background-color: #384250; */
  font-weight: bolder;
}

.el-menu-portal.el-menu--horizontal .el-submenu > .el-menu {
  top: 43px;
  min-width: 220px;
  border: 0;
}

.el-menu-portal.el-menu--horizontal .el-icon-caret-bottom:before {
  content: "";
}


</style>

